<template>
  <section>
    <van-tabs v-model="active" line-width="60px">
      <van-tab title="未读消息"></van-tab>
      <van-tab title="已读消息"></van-tab>
    </van-tabs>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      <ul>
        <li @click="$troute.query('myDetail')">
          <p>省委组织部2020年干部专题研修班在我校开班</p>
          <span>2020-12-01</span>
        </li>
        <li>
          <p>省委组织部2020年干部专题研修班在我校开班</p>
          <span>2020-12-01</span>
        </li>
        <li>
          <p>省委组织部2020年干部专题研修班在我校开班</p>
          <span>2020-12-01</span>
        </li>
        <li>
          <p>省委组织部2020年干部专题研修班在我校开班</p>
          <span>2020-12-01</span>
        </li>
      </ul>
    </van-list>
    <tabbar :index="index" />
  </section>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { List } from "vant";
import tabbar from "../../components/tabbar.vue";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(List);

export default {
  components: { tabbar },
  data() {
    return {
      active: 0,
      index: 2,
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
section {
  padding: 0 15px;
  ul {
    li {
      margin: 15px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      p {
        position: relative;
        padding-left: 15px;
        line-height: 25px;
        font-size: 16px;
        &::before {
          content: "";
          position: absolute;
          top: 10px;
          left: 0;
          width: 7px;
          height: 7px;
          background: #fd784e;
          border-radius: 50%;
        }
      }
      span {
        display: inline-block;
        margin: 5px 0 0 15px;
        color: #999;
      }
    }
  }
}
.van-tab--active {
  font-size: 16px !important;
}
</style>